<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>更换皮肤</title>
		<style>
		.box{
			height: 200px;
			
			background-color:rgba(255,255,255,0.2); 
			
		
		}
			.head {
				width: 1000px;
				height: 160px;
				margin: auto;
				padding: 40px 40px 10px 0px;
			}
			
			img {
				width: 180px;
				height: 120px;
			}
		</style>
	</head>

	<body id="bodypicture">
		<div class="box">
			<div class="head">
				<a href="#" name="img/1.jpg"><img src="img/1.jpg" /></a>
				<a href="#" name="img/2.jpg"><img src="img/2.jpg" /></a>
				<a href="#" name="img/3.jpg"><img src="img/3.jpg" /></a>
				<a href="#" name="img/4.jpg"><img src="img/4.jpg" /></a>
				<a href="#" name="img/5.jpg"><img src="img/5.jpg" /></a>

			</div>
		</div>
		 <script>
			var aArr = document.getElementsByTagName("a"); 
			var bodyimg = document.getElementById("bodypicture"); 
			bodyimg.background = "img/1.jpg";
			for(var i=0;i<aArr.length;i++)
				{ 
					aArr[i].onclick=function(){ 
						bodyimg.background=this.name;
					} 
					}
		 </script>
	</body>

</html>